<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SODN vegetation map viewer</title>

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="{{MEDIA_URL}}js/jquery.js"></script>

<!-- Make the document body take up the full screen -->
<style type="text/css">
v\: {
	behavior:url(#default#VML);
}
html, body {
	width: 100%;
	height: 100%;
	overflow: auto;
}
body {
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 0px
}
.logo {
	position: absolute;
	top: 1%;
	right: 1%;
	height: 85px;
	z-index: 3;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	filter:	alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;	
}
hr {
	position: relative;
	top: 0px;
	margin: 0;
	padding: 0;
	height: 2px;
}
h1 {
	vertical-align: top;
	margin: 0;
	padding: 0;
	border-bottom-style: dotted;
	color: #000;
	opacity: 60%;
}
h2 {
	margin: 0;
	padding: 1px;
	top: 0px;
	display: inline;
}
.notes_label{
 font-variant: small-caps
}

#parkChooser {
	position: relative;
	left: 5%;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: dotted;
	border-top-width: 2px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	background-color: Transparent;
	display: inline;
	width: 100%;
}
#loadingIndicator {
	display: inline;
	position: absolute;
	z-index:99999999999;
	top: 50%;
	left: 50%;
	font-size: xx-large;
	color: #F00;
}
#header {
	width: 100%;
	z-index: 2;
	position: absolute;
	background: #AAAAAA;
	filter:	alpha(opacity=60);
	-moz-opacity: .60;
	opacity: .60;	
}


</style>
        <script type="text/javascript">

function changePark(form) {
/*	alert(form.parkName.value)
	alert(eval(form.parkName.value).getExtent())*/
	map.zoomToExtent(eval(form.parkName.value).getDataExtent())
	switch (form.parkName.value) {
		case 'chir':
		case 'fobo':
	}
}	


function selected (evt) {
/*	var request = OpenLayers.Request.POST({
    url: "/post_test/",
    data: OpenLayers.Util.getParameterString({'poly_id': evt.feature.attributes.name,'park':document.getElementById('parkName').value}),
    headers: {
        "Content-Type": "application/x-www-form-urlencoded"
    },
    callback: handler
	})*/

$.post('/post_test/',
	   { 'poly_id': evt.feature.attributes.name,'park':document.getElementById('parkName').value },
		function(data){
			document.getElementById("veg_notes").innerHTML = data[0].fields.veg_notes;
			document.getElementById("soil_notes").innerHTML = data[0].fields.soil_notes;			
		},
  		"json");

	
	/*document.getElementById("polyName").innerHTML = evt.feature.attributes.name*/

}
            function init(){
                map = new OpenLayers.Map( 'map' );

                var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                          "http://labs.metacarta.com/wms/vmap0",
                          {layers: 'basic'} );
/*                var google = new OpenLayers.Layer.Google( "Google Hybrid" , {type: G_HYBRID_MAP });*/


                map.addLayers([wms]);

/*                map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);*/
                map.addControl( new OpenLayers.Control.LayerSwitcher() );
                map.addControl( new OpenLayers.Control.MousePosition() );
				
				//KML loading

			tont=new OpenLayers.Layer.GML("KML", "{{MEDIA_URL}}tontPolys.kml", 
               	{
                format: OpenLayers.Format.KML, 
                formatOptions: {
                  extractStyles: true, 
                  extractAttributes: true,
                }
               });

			fobo=new OpenLayers.Layer.GML("KML", "{{MEDIA_URL}}foboPolys.kml", 
               	{
                format: OpenLayers.Format.KML, 
                formatOptions: {
                  extractStyles: true, 
                  extractAttributes: true,
                }
               });
	/*		
			chir=new OpenLayers.Layer.GML("KML", "{{MEDIA_URL}}chirPolys.kml", 
               	{
                format: OpenLayers.Format.KML, 
                formatOptions: {
                  extractStyles: true, 
                  extractAttributes: true,
                }
               });

			map.addLayer(chir);*/
			map.addLayer(fobo);
            map.addLayer(tont);
			tont.events.register("featureselected", tont, selected);
			map.zoomToExtent(new OpenLayers.Bounds(-109.50192,32.11657,-109.42347,32.12966));

			selectFeature=new OpenLayers.Control.SelectFeature(
				tont,
				{
					multiple: false, hover: true,
				});

			map.addControl(selectFeature);
			
			selectFeature.activate();
			var panZoomLeftBottom = {
				'left' : '',
				'right' : '50px',				
				'top' : '',
				'bottom' : '140px'
		      }

			$('.olControlPanZoom').css(panZoomLeftBottom);
			$('.olControlLayerSwitcher').css('top','100px');
			};
        </script>

</head>
<body onload="init()">
<!-- Declare the div, make it take up the full document body -->
<div id="map" style="width: 100%; position: absolute; left:0px; right:0px; top:0px; bottom:120px;"></div>
<div id="header" style="">
<h1>Sonoran Desert Network</h1>
<img src="npsLogo.gif" alt="NPS logo" class="logo" />
<div id="parkChooserDiv">
<form id="parkChooser" action="">
  <h2> Map viewer for
  &nbsp;&nbsp;

      <select id="parkName">
        <option value="fobo">Ft Bowie NHS</option>
        <option value="chir">Chiricahua NM</option>
        <option value="tont">Tonto NM</option>
      </select>
      ,
      &nbsp;&nbsp; showing: </h2>
      &nbsp;&nbsp;
    <label>
      <input name="plotPics" type="checkbox" id="plotPics" checked="checked" />
      Monitoring photo points</label>
          <label>
      <input name="vegPolys" type="checkbox" id="vegPolys" checked="checked" />
      Vegetation polygons</label>
    &nbsp;
    <label>
      <input type="button" name="submit" id="submit" value="update map" onclick="changePark(this.form)" />
    </label>
</form>
</div>
</div>

<div id="info_bar" style="position:fixed; bottom:0px; height:120px; width:100%;	background: #BBBBBB;">

<div id="header" style="position: relative; top:0px; height:1en; border-bottom:dotted; border-bottom-width:2px">
<h3 style="position: relative; left:5%; border-left:dotted; border-left-width:2px; margin:0px">Info for polygon </h3>
</div>

<div id="veg_notes_container" style="position:absolute; bottom:0px; left:0px; top:1.5em; width:25%; overflow:auto; border:thick solid #BBBBBB">
<div class="notes_label">
Vegetation Description
</div>
<div id="veg_notes" style="height:100px; ">
test
</div>
</div>

<div id="soil_notes_container" style="position:absolute; bottom:0px; right:0px; top:1.5em; width:25%; overflow:auto; border:thick solid #BBBBBB"">
<div class="notes_label">
Landscape Description
</div>
<div id="soil_notes" style="height:100px; ">
test
</div>

</div>
</div>
</div>

</body>
</html>
